JavaScript图表组件-Highcharts
2015-09-19 16:38:08 
阿炯
Highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web或网站应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库。
HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。HighCharts界面美观，由于使用JavaScript编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度快。另外HighCharts还有很好的兼容性，能够完美支持当前大多数浏览器。
特点
兼容性
Highcharts支持目前所有的现代浏览器，包括IE6 +、iPhone/iPad、Android。Highcharts在标准(W3C标准)浏览器中使用SVG技术渲染图形，在遗留的IE浏览器中使用VML技术来绘图。
开源免费
针对个人用户及非商业用途免费，并提供源代码下载，你可以任意的修改它。商业用途需要购买许可，个人及非商业用途须遵循CC BY-NC 3.0协议。
纯Javascript
Highcharts完全基于本地浏览器技术，不需要任何插件，不需要安装任何服务器环境或动态语言库支持，只需要两个js文件即可运行。
图表类型丰富
Highcharts目前支持直线图、曲线图、面积图、曲线面积图、面积范围图、曲线面积范围图、柱状图、柱状范围图、条形图、饼图、散点图、箱线图、气泡图、误差线图、漏斗图、仪表图、瀑布图、雷达图，共18种类型图表，其中很多图表可以集成在同一个图形中形成综合图。
动态性
提供丰富的API接口，方便在创建图表后对图表的任意点、线和文字等进行增加、删除和修改操作。支持众多的Javascript事件，结合jQuery、MooTools、Prototype等javascript框架提供的Ajax接口，可以实时地从服务器取得数据并实时刷新图表。
多轴支持
对于需要比较的数据，Highcharts提供多轴支持。并且可以针对每个轴设置其位置、文字和样式等属性。
动态提示框
当鼠标悬停在图表上的数据点时，Highcharts会显示信息提示框，当然，显示的内容和样式可以自己指定和设置。
图表导出和打印功能
你可以将Highcharts图表导出为PNG、JPG、PDF和SVG格式文件或直接在网页上打印出来。
图表缩放
可以设置图表的缩放，让你更方便查看图表数据。
支持外部数据加载
Highcharts支持多种数据形式，可以是Javascript数组、json文件、json对象和表格数据等，这些数据来源可以是本地、不同页面，甚至是不同网站。
使用方法及用例说明
首先，HighCharts是基于Jquery框架开发的，所以需要在页面引入Jquery，具体代码是：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
其次，需要引入HighCharts js文件
<script src="http://code.highcharts.com/highcharts.js"></script>
引入HighCharts js文件还可以是拷贝下载下来的Highcharts资源包中的js目录下的highcharts.js文件
如果你想使用导出功能，必须引入导出相关的js文件，该文件存在与/Highcharts-4.1.0/js/modules/目录下
<script src="http://code.highcharts.com/modules/exporting.js"></script>
可选的图表样式：
直线图-line
折线图-spline
柱状图-column
饼状图-pie
区域图-area
综合图-more
组件的属性：
图表属性-chart
颜色属性-colors
版权属性-credits
导出属性-explorting
HTML标签-labels
语言属性-lang
图例属性-legengd
加载属性-loading
导出按钮属性-navigation
数据点属性-plotOptions
数据列属性-series
标题和副标题-title subtitle
数据点提示框-tooltip
X轴和Y轴-xAxis yAxis
Highcharts结构示意图(感谢hbiao68)
提供一较完整的示例：
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
//HighCharts中chart属性配置
chart: {
renderTo: 'container',//div 标签
type: 'line',//图表类型
/******************以下chart配置可选******************/
backgroundColor:"#EAF7FF",//图表背景色
borderWidth:5,//图表边框宽度
borderRadius:15,//图表边框圆角角度
plotBackgroundColor:"#6DBFBB",//主图表区背景颜色
plotBorderColor:'red',//主图表边框颜色
plotBorderWidth:2,//主图表边框宽度
shadow:true,//是否设置阴影
zoomType:'xy'//拖动鼠标放大图表的方向
},
credits : {
//enable:true,默认就为true，可以不配置
//如果想要去除版权（也就是不显示），只需要设置enable:false即可
href:'http://www.freeoa.net',//链接地址
position: {//文字的位置
x:-30,
y:-30
},
style:{ //文字的样式
color:'red',
fontWeight:'bold'
},
enabled:true,//不显示highCharts版权信息,不显示为false
text:'FreeOA' //文字
},
/******************
**Colors-颜色属性为可选配置
**通过配置配置colors，可以轻松的设置数据列的颜色
1、颜色代码可以是十六进制，也可以是英文单词，还可以是RGB，如同css
2、默认是从第一个数据列起调用第一个颜色代码，有多少个数据列调用相应数量的颜色
3、当数据列大于默认颜色数量时，重复从第一个颜色看是调用
******************/
colors:[
'#000000',//黑
'#FF0000',//红
'#00FF00',//绿
'#0000FF',//蓝
'#FFFF00',//黄
'#FF00FF',//紫
'#FFFFFF',//紫
],
exporting: {
//enabled:true,默认为可用，当设置为false时，图表的打印及导出功能失效
buttons:{ //配置按钮选项
printButton:{ //配置打印按钮
width:50,
symbolSize:20,
borderWidth:2,
borderRadius:0,
hoverBorderColor:'red',
height:30,
symbolX:25,
symbolY:15,
x:-200,
y:20
},
exportButton:{ //配置导出按钮
width:50,
symbolSize:20,
borderWidth:2,
borderRadius:0,
hoverBorderColor:'red',
height:30,
symbolX:25,
symbolY:15,
x:-150,
y:20
}
},
filename:'freeoa.net',//导出的文件名
type:'image/png',//导出的文件类型
width:900 //导出的文件宽度
},
labels:{
items:[{
//标签代码（html代码）
html:'<p style="font-size:20">Copyright © 2012-2015 </p><a href="http://www.freeoa.net" style="font-size:18;text-decoration: underline;">FreeOA</a>',
style:{ //设置标签位置
left:'100px',
top:'50px'
}
}],
style:{//设置标签颜色
color:'rgb(0,0,255)'
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
});
</script>
最新版本：6.0
为 web 和移动开发人员提供了扩展的图表集合、客户端分析、注释和大量性能提升。
Highcharts 6 包含 15 种新的图表系列类型，包括 Sankey diagram(桑基图)、Stream graph、Sunburst(旭日图)、Variwide Charts、Parallel coordinates、Variable radius pie、Vector plot、Wind-barbs、X-range 等。 另外还有像是 Venn diagram(维恩图)和 Marimekko charts(细分市场份额矩阵图)，也将在未来几个月内发布。ighcharts 6 还简化了代码库，遵循现代风格，重新设计了 Annotations 注解模块，通过注解，开发人员可以通过在画布上的任何位置绘制简单的形状和文本来描述图表或数据点，或绑定到指定的数据点。此外，Boost 模块已从使用 Canvas 转换为 WebGL ，从而在可用时利用 GPU 加速。
项目主页：http://www.highcharts.com/products/highcharts/
中文参考：http://www.hcharts.cn/index.php
HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。HighCharts界面美观，由于使用JavaScript编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度快。另外HighCharts还有很好的兼容性，能够完美支持当前大多数浏览器。
特点
兼容性
Highcharts支持目前所有的现代浏览器，包括IE6 +、iPhone/iPad、Android。Highcharts在标准(W3C标准)浏览器中使用SVG技术渲染图形，在遗留的IE浏览器中使用VML技术来绘图。
开源免费
针对个人用户及非商业用途免费，并提供源代码下载，你可以任意的修改它。商业用途需要购买许可，个人及非商业用途须遵循CC BY-NC 3.0协议。
纯Javascript
Highcharts完全基于本地浏览器技术，不需要任何插件，不需要安装任何服务器环境或动态语言库支持，只需要两个js文件即可运行。
图表类型丰富
Highcharts目前支持直线图、曲线图、面积图、曲线面积图、面积范围图、曲线面积范围图、柱状图、柱状范围图、条形图、饼图、散点图、箱线图、气泡图、误差线图、漏斗图、仪表图、瀑布图、雷达图，共18种类型图表，其中很多图表可以集成在同一个图形中形成综合图。
动态性
提供丰富的API接口，方便在创建图表后对图表的任意点、线和文字等进行增加、删除和修改操作。支持众多的Javascript事件，结合jQuery、MooTools、Prototype等javascript框架提供的Ajax接口，可以实时地从服务器取得数据并实时刷新图表。
多轴支持
对于需要比较的数据，Highcharts提供多轴支持。并且可以针对每个轴设置其位置、文字和样式等属性。
动态提示框
当鼠标悬停在图表上的数据点时，Highcharts会显示信息提示框，当然，显示的内容和样式可以自己指定和设置。
图表导出和打印功能
你可以将Highcharts图表导出为PNG、JPG、PDF和SVG格式文件或直接在网页上打印出来。
图表缩放
可以设置图表的缩放，让你更方便查看图表数据。
支持外部数据加载
Highcharts支持多种数据形式，可以是Javascript数组、json文件、json对象和表格数据等，这些数据来源可以是本地、不同页面，甚至是不同网站。
使用方法及用例说明
首先，HighCharts是基于Jquery框架开发的，所以需要在页面引入Jquery，具体代码是：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
其次，需要引入HighCharts js文件
<script src="http://code.highcharts.com/highcharts.js"></script>
引入HighCharts js文件还可以是拷贝下载下来的Highcharts资源包中的js目录下的highcharts.js文件
如果你想使用导出功能，必须引入导出相关的js文件，该文件存在与/Highcharts-4.1.0/js/modules/目录下
<script src="http://code.highcharts.com/modules/exporting.js"></script>
可选的图表样式：
直线图-line
折线图-spline
柱状图-column
饼状图-pie
区域图-area
综合图-more
组件的属性：
图表属性-chart
颜色属性-colors
版权属性-credits
导出属性-explorting
HTML标签-labels
语言属性-lang
图例属性-legengd
加载属性-loading
导出按钮属性-navigation
数据点属性-plotOptions
数据列属性-series
标题和副标题-title subtitle
数据点提示框-tooltip
X轴和Y轴-xAxis yAxis
Highcharts结构示意图(感谢hbiao68)
提供一较完整的示例：
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
//HighCharts中chart属性配置
chart: {
renderTo: 'container',//div 标签
type: 'line',//图表类型
/******************以下chart配置可选******************/
backgroundColor:"#EAF7FF",//图表背景色
borderWidth:5,//图表边框宽度
borderRadius:15,//图表边框圆角角度
plotBackgroundColor:"#6DBFBB",//主图表区背景颜色
plotBorderColor:'red',//主图表边框颜色
plotBorderWidth:2,//主图表边框宽度
shadow:true,//是否设置阴影
zoomType:'xy'//拖动鼠标放大图表的方向
},
credits : {
//enable:true,默认就为true，可以不配置
//如果想要去除版权（也就是不显示），只需要设置enable:false即可
href:'http://www.freeoa.net',//链接地址
position: {//文字的位置
x:-30,
y:-30
},
style:{ //文字的样式
color:'red',
fontWeight:'bold'
},
enabled:true,//不显示highCharts版权信息,不显示为false
text:'FreeOA' //文字
},
/******************
**Colors-颜色属性为可选配置
**通过配置配置colors，可以轻松的设置数据列的颜色
1、颜色代码可以是十六进制，也可以是英文单词，还可以是RGB，如同css
2、默认是从第一个数据列起调用第一个颜色代码，有多少个数据列调用相应数量的颜色
3、当数据列大于默认颜色数量时，重复从第一个颜色看是调用
******************/
colors:[
'#000000',//黑
'#FF0000',//红
'#00FF00',//绿
'#0000FF',//蓝
'#FFFF00',//黄
'#FF00FF',//紫
'#FFFFFF',//紫
],
exporting: {
//enabled:true,默认为可用，当设置为false时，图表的打印及导出功能失效
buttons:{ //配置按钮选项
printButton:{ //配置打印按钮
width:50,
symbolSize:20,
borderWidth:2,
borderRadius:0,
hoverBorderColor:'red',
height:30,
symbolX:25,
symbolY:15,
x:-200,
y:20
},
exportButton:{ //配置导出按钮
width:50,
symbolSize:20,
borderWidth:2,
borderRadius:0,
hoverBorderColor:'red',
height:30,
symbolX:25,
symbolY:15,
x:-150,
y:20
}
},
filename:'freeoa.net',//导出的文件名
type:'image/png',//导出的文件类型
width:900 //导出的文件宽度
},
labels:{
items:[{
//标签代码（html代码）
html:'<p style="font-size:20">Copyright © 2012-2015 </p><a href="http://www.freeoa.net" style="font-size:18;text-decoration: underline;">FreeOA</a>',
style:{ //设置标签位置
left:'100px',
top:'50px'
}
}],
style:{//设置标签颜色
color:'rgb(0,0,255)'
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
});
</script>
最新版本：6.0
为 web 和移动开发人员提供了扩展的图表集合、客户端分析、注释和大量性能提升。
Highcharts 6 包含 15 种新的图表系列类型，包括 Sankey diagram(桑基图)、Stream graph、Sunburst(旭日图)、Variwide Charts、Parallel coordinates、Variable radius pie、Vector plot、Wind-barbs、X-range 等。 另外还有像是 Venn diagram(维恩图)和 Marimekko charts(细分市场份额矩阵图)，也将在未来几个月内发布。ighcharts 6 还简化了代码库，遵循现代风格，重新设计了 Annotations 注解模块，通过注解，开发人员可以通过在画布上的任何位置绘制简单的形状和文本来描述图表或数据点，或绑定到指定的数据点。此外，Boost 模块已从使用 Canvas 转换为 WebGL ，从而在可用时利用 GPU 加速。
项目主页：http://www.highcharts.com/products/highcharts/
中文参考：http://www.hcharts.cn/index.php